<template>
    <div v-if="!history || !history.id"
        class="w-full h-full flex items-center justify-center bg-gradient-to-b from-blue-200 via-blue-200 to-blue-100">
        <h1>没有答题记录</h1>
    </div>
    <div v-else class="w-full flex flex-col justify-between bg-gradient-to-b from-blue-200 via-blue-200 to-blue-100">
        <h1 class="text-4xl font-black text-blue-800 text-center px-10 py-12">{{ history?.topic?.title }}</h1>
        <div class="flex justify-evenly text-center leading-loose text-slate-600">
            <p>答题人：{{ history?.user?.nickname }}</p>
            <p>手机号：{{ history?.user?.phone?.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}</p>
        </div>
        <div class="flex justify-evenly text-center leading-loose text-slate-600">
            <p>得分：<span class="text-red-600">{{ history?.score }}</span></p>
            <p>时间：{{ $dayjs(history?.createdAt).format('YYYY/MM/DD') }}</p>
        </div>
        <div>
            <div v-for="(exam, index) in JSON.parse(history?.content)" class="bg-orange-100 p-5 m-5 text-slate-600">
                <h3 class="p-3 text-lg leading-relaxed"><span>{{ index + 1 }}</span>. 【{{ exam?.answer?.length > 1 ? '多选题' :
                    (exam?.C ? '单选题' : '判断题') }}】{{ exam?.title }}</h3>
                <template v-for="opt in optArr">
                    <p v-if="exam?.[opt]" class="px-3 py-1"><span>{{ opt }}. </span>{{ exam?.[opt] }}</p>
                </template>
                <p class="px-3 mt-3">正确答案：<span class="text-green-600 mr-6">{{ exam?.answer }}</span> 您的选择：<span
                        :class="exam?.answer == exam?.selected ? 'text-green-600' : 'text-red-600'">{{ exam?.selected }}</span>
                </p>
            </div>
        </div>
        <div class="flex justify-center">
            <el-button type="primary" @click="$router.replace(`/answer/${history?.topic?.id}`)" size="large" round plain
                class="w-1/3 mx-auto">返 回</el-button>
        </div>
        <p class="text-center text-slate-400 leading-relaxed mt-10">甘肃省司法厅&copy;版权所有<br>中国甘肃网技术支持</p>
    </div>
</template>

<script setup>
const route = useRoute()
const optArr = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'])
const { data: history } = await useFetch(`/api/history`, { params: route.query })

</script>